<template>
	<div class="news">
	 <div class="news-title">
      <img src="../assets/img/h3_bj.jpg" >
      <h3>师资介绍</h3>
      <img src="../assets/img/h3_bj.jpg" >
    </div>
    <div class="name-en">
      <h3>TEACHERS</h3>
    </div>
    <div class="teacher-list">
      <div class="teacher" v-for="item in teacherList" :key="item.id">
        <div><img :src="item.imgUrl"></div>
        <div class="name"><p>{{item.name}}</p><p>{{item.title}}</p></div>
        <p>{{item.zs_desc}}</p>
      </div>
    </div>
	</div>
</template>

<script>
export default {
  name: "HomeNew",
  data() {
    return {
      teacherList: [
        {
          id: "1",
          name: "王德法",
          zs_desc: "资深讲师资讲师资深讲师资深讲师····",
          title: "资深讲师",
          imgUrl: require("../assets/img/teacher.jpg")
        },
        {
          id: "2",
          name: "张德顺",
          zs_desc: "资深讲师资讲师资深讲师资深讲师····",
          title: "资深讲师",
          imgUrl: require("../assets/img/teacher.jpg")
        },
        {
          id: "3",
          name: "王德法",
          zs_desc: "资深讲师资讲师资深讲师资深讲师····",
          title: "资深讲师",
          imgUrl: require("../assets/img/teacher.jpg")
        },
        {
          id: "4",
          name: "张德顺",
          zs_desc: "资深讲师资讲师资深讲师资深讲师····",
          title: "资深讲师",
          imgUrl: require("../assets/img/teacher.jpg")
        }
      ]
    };
  },
  mounted() {}
};
</script>

<style lang="stylus" scoped>
a
  text-decoration none

.news
  width 96%
  padding 0rem 2%
  .news-title
    margin 0 auto
    display flex
    justify-content center
    img
      width .48rem
      height .27rem
    h3
      font-size .3rem
      padding 0 .12rem
      color #303030
  .name-en
    width 100%
    text-align center
    margin-top .13rem
    margin-bottom .45rem
    h3
      color #b6b6b6
      font-size .3rem
  .teacher-list
    width 100%
    display flex
    flex-wrap wrap
    .teacher
      width 2.94rem
      img
        width 100%
        display block
      .name
        display flex
        justify-content space-evenly
        margin .16rem 0 0rem 0
        p:nth-of-type(1)
          font-size .14rem
          color #3a3a3a
        p:nth-of-type(2)
          font-size .2rem
          color #3a3a3a
      p
        font-size .14rem
        color #3a3a3a
        text-align left
        padding-bottom .14rem
        text-overflow ellipsis
        overflow hidden
        white-space nowrap
    .teacher:nth-of-type(1)
      padding-right .13rem
    .teacher:nth-of-type(3)
      padding-right .13rem
    .teacher:nth-of-type(2)
      padding-left .13rem
    .teacher:nth-of-type(4)
      padding-left .13rem
</style>
